<!--
 * @Description: 商品列表
 * @Author: xiao li
 * @Date: 2021-07-04 00:16:14
 * @LastEditTime: 2021-08-23 16:57:19
 * @LastEditors: xiao li
-->
<template>
  <div>
    <div class="fill-base pd-lg" v-if="o.data.type === 1">
      <div
        class="good-child flex-warp"
        :class="[{ 'pt-lg': index !== 0 }]"
        v-for="(item, index) in 4"
        :key="index"
      >
        <div class="rel radius-10" style="overflow: hidden">
          <img class="good-img" :src="image" />
          <div class="good-tag" v-if="index === 0">推荐产品</div>
        </div>
        <div class="flex-1 ml-lg">
          <div class="good-title f-paragraph c-title">
            {{ title }}
          </div>
          <div class="f-desc c-warning" v-if="index === 0">面议</div>
          <div class="flex-y-baseline f-caption c-caption" v-else>
            <div class="flex-y-baseline c-warning">
              ¥
              <div class="f-title">188{{ index + 5 }}</div>
            </div>
            <div class="text-delete ml-sm" v-if="index < 2">¥2999</div>
          </div>
          <div
            class="good-tag-tuan flex-center c-warning mt-sm"
            v-if="index > 1"
          >
            <i class="iconfont iconpintuan"></i>拼团享优惠
          </div>
        </div>
      </div>
    </div>
    <div class="flex-warp" v-if="o.data.type === 2">
      <div
        class="good-item"
        :style="{ marginTop: !isMyGoods && index < 2 ? '13px' : '' }"
        v-for="(item, index) in 4"
        :key="index"
      >
        <img class="good-img" :src="image" />
        <div class="pd-md">
          <div class="flex-y-center">
            <div class="good-tag_pt mr-sm" v-if="index > 1">团</div>
            <div class="flex-1 ellipsis">{{ title }}</div>
          </div>
          <div class="c-warning f-title flex-y-baseline">
            <block v-if="index === 0">面议</block>
            <div class="flex-y-center" v-else>
              <div>￥188{{ index + 5 }} /件</div>
              <div
                class="text-delete f-paragraph c-caption ml-sm flex-1 ellipsis"
                v-if="index === 1"
              >
                ¥2999
              </div>
            </div>
          </div>
        </div>
        <div class="good-tag" v-if="index === 0">推荐产品</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goodsList',
  props: {
    o: Object,
    isMyGoods: false
  },
  data () {
    return {
      primaryColor: '#19c865',
      image: 'https://lbqny.migugu.com/admin/diy/default.png',
      title: '商品标题商品标题商品标题商品标题商品标题'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.good-child {
  .good-img {
    width: 128px;
    height: 124px;
    border-radius: 5px;
  }
  .good-title {
    height: 70px;
  }
  .good-tag-tuan {
    width: 90px;
    height: 20px;
    background: rgba(245, 23, 52, 0.06);
    border-radius: 12px;
    font-size: 8px;
    .iconfont {
      margin-right: 2px;
    }
  }
}
.good-item {
  width: 165px;
  background: #fff;
  margin: 0 0 13px 13px;
  background: #fff;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
  position: relative;
  color: #333;
  .good-img {
    width: 165px;
    height: 165px;
    background: #eeeeee;
  }
}
.good-tag {
  width: 70px;
  height: 70px;
  background: #f12c20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 0;
  font-size: 11px;
  position: absolute;
  right: -35px;
  top: -35px;
  transform: rotate(45deg);
  color: #fff;
}
.good-tag_pt {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  font-size: 11px;
  background: #f92a2a;
  color: #fff;
  display: inline-block;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}
</style>
